<template>
  <div>
    <div class="content-item">
      <div class="g-condition">
        <span class="label">检索条件：</span>
        <el-date-picker v-model="queryParams.date"
                        type="daterange"
                        size="small"
                        style="width: 250px;"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" />
      </div>
      <div class="g-condition">
        <el-select v-model="queryParams.rateType"
                   placeholder="--评比类型--"
                   style="width: 250px;"
                   size="small">
          <el-option v-for="(item, index) in types"
                     :key="index"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="g-condition">
        <el-select v-model="queryParams.status"
                   placeholder="--状态--"
                   style="width: 250px;"
                   size="small">
          <el-option v-for="(item, index) in statusRating"
                     :key="index"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="g-condition">
        <el-input v-model.trim="queryParams.name"
                  v-intercept:param="queryParams.name"
                  size="small"
                  class="condition"
                  style="width: 250px;"
                  placeholder="输入评比工作名称">
        </el-input>
      </div>
      <div>
        <el-button size="small"
                   type="primary"
                   @click="query()">搜索
        </el-button>
        <el-button size="small"
                   @click="reset">重置
        </el-button>
        <el-button size="small"
                   v-if="userInfo && userInfo.roleName === '学校用户'"
                   @click="add">+新增
        </el-button>
      </div>
    </div>
    <div class="content-item">
      <el-table :data="tableData"
                class="table-header-gray">
        <el-table-column label="创建日期"
                         :formatter="formatTime"
                         prop="createAt">
        </el-table-column>
        <el-table-column label="评比工作"
                         prop="name">
        </el-table-column>
        <el-table-column label="评比类型"
                         :formatter="formatRate"
                         prop="rateType">
        </el-table-column>
        <el-table-column label="开始日期"
                         :formatter="formatTime"
                         prop="startAt">
        </el-table-column>
        <el-table-column label="结束日期"
                         :formatter="formatTime"
                         prop="endAt">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span :class="'g-status-' + scope.row.status">{{formatRateStatus(scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <span class="gtextlink"
                    @click="auth(scope.row, 'edit')">编辑</span>
              <span class="gtextlink"
                    @click="auth(scope.row, 'del')">删除</span>
              <span class="gtextlink"
                    v-if="userInfo.roleName === '学校用户' || userInfo.roleName === '学院用户' || scope.row.status > 2 || (userInfo.roleName === '住楼辅导员' && scope.row.rateType === 1)"
                    @click="toRoll(scope.row)">名单</span>
            </div>
            <!-- <div v-else>
              <span class="g-text-gray">编辑</span>
              <span class="g-text-gray">删除</span>
            </div> -->
          </template>
        </el-table-column>
      </el-table>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
  </div>

</template>
<script>
import { modifyRatingUsingDELETE, listPageUsingPOST } from '@api/auto'
import { pagination, formatTool, config } from '@/tools/mixin'
export default {
  name: '',
  props: {
  },
  mixins: [pagination, formatTool, config],
  components: {},
  data () {
    return {
      total: 0,
      userInfo: {},
      queryParams: {
        size: 10,
        num: 1,
        date: '',
        createBegin: '',
        createEnd: '',
        status: '',
        name: '',
        rateType: ''
      },
      tableData: [],
      types: [
        {
          label: '星级寝室',
          value: 1
        },
        {
          label: '校文明寝室',
          value: 2
        },
        {
          label: '校标兵寝室',
          value: 3
        }
      ]
    }
  },
  created () { },
  mounted () {
    this.userInfo = JSON.parse(sessionStorage.userInfo)
    this.query()
  },
  methods: {
    init () {
      this.queryParams = {
        size: 10,
        page: 1,
        date: '',
        createBegin: '',
        createEnd: '',
        status: '',
        workNameOrUserName: '',
        sortType: ''
      }
    },
    reset () {
      this.init()
      this.query()
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      if (this.queryParams.date && this.queryParams.date.length) {
        [this.queryParams.createBegin, this.queryParams.createEnd] = [...this.queryParams.date]
      }
      listPageUsingPOST(this.queryParams)
        .then(res => {
          this.total = res.data.total || 0
          this.tableData = res.data && res.data.list
        })
    },
    toRoll (data) {
      if (data.status === 1) {
        this.$message.warning('评比工作还未开始，不能查看评比名单')
      } else {
        sessionStorage.rateInfo = JSON.stringify(data)
        this.$router.push(
          {
            path: '/main/dormManage/dormRate/panel'
          }
        )
      }
    },
    auth (data, type) {
      let userInfo = JSON.parse(sessionStorage.userInfo)
      if (userInfo.roleName !== '学校用户' || userInfo.sn !== data.creatorSn) {
        this.$message.error('您没有权限进行该操作')
      } else {
        this[type](data)
      }
    },
    del (data) {
      // 通过id删除项
      this.$confirm('是否确认删除此项寝室评比？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        modifyRatingUsingDELETE(data.id)
          .then(() => {
            this.query()
            this.$message.success('删除成功')
          })
      })
    },
    edit (data) {
      sessionStorage.rateContent = JSON.stringify(data)
      this.$router.push({
        query: {
          type: 'edit',
          routeName: '编辑'
        },
        path: '/main/dormManage/dormRate/edit'
      })
    },
    add () {
      this.$router.push({
        query: {
          type: 'add'
        },
        path: '/main/dormManage/dormRate/edit'
      })
    }
  }
}
</script>
<style lang='less' scoped>
</style>
